<template>
	<view class="order">
		<view class="search">
			<u-input placeholder="搜索订单号" prefixIcon="search" v-model="orderName" shape="circle"
				prefixIconStyle="font-size: 22px;color: #909399" @change="input"></u-input>
		</view>
		<view class="select">
			<view class="picker" @click="toggle('bottom')">
				全部订单
				<uni-icons type="down" size="14"></uni-icons>
			</view>
		</view>
		<view class="order-list" style="padding-bottom: 100rpx;" v-if="orderList.length > 0">
			<view class="order-item" v-for="(item, index) in orderList" :key="index" @click="goDetail(item)">
				<view class="order-top">
					<view class="top-left" @click.stop="copyOrder(item.out_trade_no)">订单号：{{ item.out_trade_no }}</view>
					<view class="top-right">{{ item.state.text }}</view>
				</view>
				<view class="order-line"></view>
				<view class="order-center">
					<view class="center-prev">
						<view class="center-text">{{ item.subject }}</view>
						<view class="center-btn">{{ item.trade_type.text }}</view>
					</view>
					<view class="center-amount">￥{{ parseFloat(item.trade_money).toFixed(2) || '0.00' }}</view>
				</view>
				<view class="order-line"></view>
				<view class="order-bottom">
					<view class="time">{{ item.create_time }}</view>
				</view>
			</view>
		</view>
		<view v-else class="nodata">
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
			</u-empty>
		</view>
		<!-- 弹出层 -->
		<uni-popup ref="popup" background-color="#fff" border-radius="16rpx 16rpx 0 0">
			<view class="popup-content">
				<view class="order-type">
					<view class="type-text">订单类型</view>
					<view class="type-list">
						<view class="type-item" v-for="(item,index) in typeList" :key="index"
							:class="{ active: tradeType === index }" @click="selecType(item, index)">{{ item.text }}</view>
					</view>
				</view>
				<view class="order-type">
					<view class="type-text">支付状态</view>
					<view class="type-list">
						<view class="type-item" v-for="(item,index) in cashList" :key="index" :class="{ active: state === index }"
							@click="selectState(item, index)">{{ item.text }}</view>
					</view>
				</view>
				<view class="order-type">
					<view class="type-text">下单时间</view>
					<view class="type-list">
						<view class="type-item" v-for="(item,index) in timeList" :key="index"
							:class="{ active: activeIndex === index }" @click="selecTime(item, index)">{{ item.text }}</view>
					</view>
				</view>
				<view class="popup-btn">
					<button class="cancle-btn btn" @click="cancleBtn">取消</button>
					<button class="confirm-btn btn" @click="searchList">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getOrderList
	} from '@/api/order.js'
	export default {
		data() {
			return {
				orderList: [],
				orderName: '',
				list: ['选项1', '选项2', '选项3', '选项4'],
				selectedValue: '请选择',
				text: '软件服务',
				msgType: 'success',
				messageText: '这是一条成功提示',
				// typeList: ['全部', '新购', '续费', '降级', '升级', '补偿续费', '退款'],
				// 0未知 1调账 2充值 3退款 4提现 5消费 6订单失效退款 7转账 8新购 9续费 10升级 11降级 12补偿续费
				typeList: [{
						text: '全部',
						type: ''
					}, {
						text: '新购',
						type: 8
					}, {
						text: '续费',
						type: 9
					},
					{
						text: '降级',
						type: 11
					}, {
						text: '升级',
						type: 10
					}, {
						text: '补偿续费',
						type: 12
					},
					{
						text: '退款',
						type: 3
					}
				],
				// cashList: ['全部', '已支付', '未支付', '作废'],
				cashList: [{
						text: '全部',
						state: ''
					},
					{
						text: '已支付',
						state: 1
					},
					{
						text: '未支付',
						state: 0
					},
					{
						text: '作废',
						state: 2
					},
					// { text: '异常', state: 99 },
				],
				timeList: [{
						text: '全部',
						state: ''
					},
					{
						text: '近三个月',
						state: '1'
					},
					{
						text: '近六个月',
						state: '2'
					},
					// {
					// 	text: '近一年',
					// 	state: '3'
					// },
				],
				activeIndex: null,
				tradeType: null,
				state: null,
				total: null, //总条数
				param: {
					"keyword": '',
					"trade_type": '',
					"state": '',
					time: '',
					pageNum: 1, //第几页
					pageSize: 10, //显示多少条
				},
			}
		},
		onShow() {
			console.log('加载完成')
			this.getListInfo()
		},
		onPullDownRefresh() {
			this.orderList = []
			this.getListInfo()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		methods: {
			copyOrder(order) {
				uni.setClipboardData({
					data: order,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						});
					},
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			getListInfo() {
				console.log('this.param', this.param)
				getOrderList(this.param).then(res => {
					const {
						data
					} = res
					console.log('data', data)
					this.orderList = data.data
					this.total = data.total
				})
			},
			toggle(type) {
				console.log('type', type, this.$refs.popup)
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			input() {
				console.log('ghfdfghd');
				this.param.keyword = this.orderName;
				this.getListInfo();
			},
			// 时间
			selecTime(item, index) {
				console.log('index', index)
				this.activeIndex = index
				this.param.time = item.state
			},
			// 状态
			selectState(item, index) {
				this.state = index;
				this.param.state = item.state;
			},
			// 类型
			selecType(item, index) {
				this.tradeType = index;
				this.param.trade_type = item.type;
			},
			searchList() {
				this.cancleBtn()
				this.getListInfo();
			},
			cancleBtn() {
				this.$refs.popup.close();
			},
			goDetail(item) {
				console.log('item', item)
				const param = encodeURIComponent(JSON.stringify(item));
				uni.navigateTo({
					url: `/pages/order/orderDetail?param=${param}`
				})
			},


			// 触底事件
			// onReachBottom() {
			//   console.log('触底了')
			// 	if (this.param.pageNum * this.param.pageSize >= this.total) {
			// 		uni.showToast({
			// 			title: '没有更多数据了',
			// 			icon: 'none',
			// 			duration: 1000
			// 		});
			// 		setTimeout(() => {
			// 			uni.hideLoading()
			// 		}, 500)
			// 	} else {
			// 		if (this.param.pageNum <= this.param.pageNum - 1) {
			// 			setTimeout(() => {
			// 				uni.hideLoading()
			// 			}, 500)
			// 		} else {
			// 			uni.showLoading({
			// 				title: '加载中'
			// 			});
			// 			this.param.pageNum++
			// 			this.getListInfo()
			// 		}
			// 		setTimeout(() => {
			// 			uni.hideLoading()
			// 		}, 500)
			// 	}
			// },
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		margin: 20rpx 36rpx;
	}

	.select {
		margin-top: 60rpx;
		font-size: #{$text-size};

		.picker {
			margin-right: 12rpx;
		}
	}

	.order-item {
		background: #fff;
		border-radius: 16rpx;
		padding: 10rpx 20rpx;
		margin-top: 20rpx;
		box-sizing: border-box;

		.order-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			line-height: 36rpx;

			.top-left {
				font-size: 24rpx;
				color: #999;
			}

			.top-right {
				font-size: 28rpx;
				color: #ff6005;
			}
		}

		.order-center {
			// margin-top: 40rpx;
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			color: #333;

			.center-prev {
				display: flex;
				align-items: center;

				.center-text {
					max-width: 450rpx;
				}

				.center-btn {
					margin-left: 20rpx;
					background: #333;
					color: #fff;
					border-radius: 20rpx;
					font-size: 20rpx;
					padding: 2rpx 16rpx;
					text-align: center;
					box-sizing: border-box;
					white-space: nowrap;
				}
			}
		}

		.order-bottom {
			// margin-top: 20rpx;
			font-size: 24rpx;
			color: #999;
			height: 80rpx;

			.time {
				float: right;
				// margin-left: 60%;
				line-height: 80rpx;
			}
		}

		.order-line {
			border-bottom: 1px solid #f5f5f5;
			// margin-top: 20rpx;
		}
	}

	.popup-content {
		padding: 15px;
		height: 100%;
		background-color: #fff;
		border-radius: 20rpx;

		.order-type {
			margin-bottom: 30rpx;

			.type-text {
				font-size: 28rpx;
			}

			.type-list {
				display: flex;
				flex-wrap: wrap;
			}

			.type-item {
				border: 1px solid #e2ebe2;
				padding: 18rpx 40rpx;
				box-sizing: border-box;
				border-radius: 50rpx;
				margin: 20rpx 20rpx 0rpx 0;
				font-size: 28rpx;
				color: #999;
			}

			// .type-item:last-child:not(.item:nth-child(5n)) {
			//   margin-right: 0;
			// }
		}

		.popup-btn {
			// width: 70%;
			margin: auto;
			display: flex;
			justify-content: space-between;
			margin-top: 120rpx;

			.btn {
				width: 200rpx;
				height: 70rpx;
				border-radius: 40rpx;
				font-size: 28rpx;
				text-align: center;
				line-height: 70rpx;
			}

			.confirm-btn {
				color: #fff;
				background-color: #{$main-color};
			}

			.cancle-btn {
				color: #{$main-color};
				border: 1px solid #{$main-color};
			}
		}
	}

	::v-deep .is-input-border {
		border-radius: 20px;
		font-size: #{$text-size}
	}

	::v-deep .u-input--circle {
		background: #fff;
	}

	.active {
		background: #fff !important;
		color: #ff6005 !important;
		border: 1px solid #ff6005 !important;
	}
</style>